<template>
	<view class="content">
		<view class="dt" style="padding: 1upx 30upx;">
			<view class="navs uniBtn">
				<view class="name" style="font-weight: bold;">外治法（多选）<text style="color: red;">*</text>：</view>
				<view class="info2">
					<picker @change="bindPickerChange" :value="index" :range="array" range-key="title">
						<view class="uniEnd">
							<view v-if="arrayName">{{arrayName}}</view>
							<view v-else>请选择</view>
							<img src="../../static/bg/icons.png" alt="">
						</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="dt" style="padding: 1upx 30upx;" v-for="(item,index) in list" :key="index">
			<view class="navs uniBtn">
				<view class="name" style="font-weight: bold;">{{item.title}}：</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">选择部位<text style="color: red;">*</text>：</view>
				<view class="info2">
					<picker @change="bindPickerChange2($event,index)" :value="index2" :range="array2" range-key="title">
						<view class="uniEnd">
							<view v-if="item.onceName">{{item.onceName}}</view>
							<view v-else>请选择</view>
							<img src="../../static/bg/icons.png" alt="">
						</view>
					</picker>
				</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">选择穴位（多选）：</view>
				<view class="info2">
					<picker @change="bindPickerChangeArray($event,index)" :value="item.index" :range="item.secondArray"
						range-key="title">
						<view class="uniEnd">
							<view v-if="item.secondName">{{item.secondName}}</view>
							<view v-else>请选择</view>
							<img src="../../static/bg/icons.png" alt="">
						</view>
					</picker>
				</view>
			</view>
			<view class="navs uniBtn2">
				<view class="name" style="color: red;" v-if="item.secondNameList.length>0">单击删除</view>
				<view class="info2" style="flex-wrap:wrap;">
					<view v-for="(k,m) in item.secondNameList" :key="m" @click="delSecondName(index,m)" class="input2"
						style="height: 55upx;overflow: hidden;
					text-align: center;margin-right: 20upx;margin-bottom: 20upx;overflow: hidden;text-overflow: ellipsis;
					white-space: nowrap;">
						{{k}}
					</view>
				</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">单价<text style="color: red;">*</text>：</view>
				<view class="info2">
					<input @blur="calculation" v-model="item.price" class="input2" style="width: 475upx;" type="number"
						placeholder="请输入" placeholder-class="pcs2">
				</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">次数<text style="color: red;">*</text>：</view>
				<view class="info2">
					<input @blur="calculation" v-model="item.num1" class="input2" type="number" placeholder="次数"
						placeholder-class="pcs2">
				</view>
				<view class="info2">
					<input @blur="calculation" v-model="item.num2" class="input2" type="number" placeholder="赠送次数"
						placeholder-class="pcs2">
				</view>
			</view>
			<view class="uniEnd">
				<view class="delIndex" @click="delIndex(index)">删除</view>
			</view>
		</view>

		<view class="dt" style="padding: 1upx 30upx;">
			<view class="navs uniBtn">
				<view class="name">总价格：</view>
				<view class="info2" style="color: red;">
					<view class="uniFlex">
						￥{{moneys}}
						<!-- <view class="fast" @click="calculation">立即计算</view> -->
					</view>
				</view>
			</view>
			<view class="navs uniBtn">
				<view class="name">到期时间<text style="color: red;">*</text>：</view>
				<view class="info2">
					<picker mode="date" :start="begin" :value="time" @change="bindDateChange">
						<view class="uniEnd">
							<view v-if="time">{{time}}</view>
							<view v-else>请选择</view>
							<img src="../../static/bg/icons.png" alt="">
						</view>
					</picker>
				</view>
			</view>
			<view class="navs uniBtn2">
				<view class="name">备注：</view>
				<view class="info2">
					<view class="uniFlex2">
						<textarea style="height: 200upx;" v-model="remarks" maxlength="-1" placeholder="请输入" placeholder-class="pcs2"></textarea>
					</view>
				</view>
			</view>
		</view>
		<view class="uniFlex">
			<view class="btnStyle btnStyle2" @click="backed">取消</view>
			<view class="btnStyle" @click="submit">确认</view>
		</view>
	</view>
</template>

<script>
	import {
		wzf,
		xuewei,
		tempwzf
	} from '@/request/api.js';
	export default {
		data() {
			return {
				array: [],
				index: -1,
				arrayId: '',
				arrayName: '',

				list: [
					// {title:'',id:'',onceId:'',onceName:'',secondArray:[],index:0,secondName:'',secondNameList:'',price:0,num1:'',num2:''}
				],

				array2: [],
				index2: 0,

				moneys: 0, //总价格
				begin: '',
				time: '',
				remarks:''
			}
		},
		onLoad(options) {
			if(options.oid){
				this.list = uni.getStorageSync('outsideMsg')
			}
			var date1 = new Date();
			var date2 = new Date(date1);
			//-30为30天前，+30可以获得30天后的日期
			date2.setDate(date1.getDate() + 30);
			//30天前（月份判断是否小于10，小于10的前面+0）
			var agoDay = `${date2.getFullYear()}-${date2.getMonth() + 1<10?`0${date2.getMonth() + 1}`:date2.getMonth() + 1}-${date2.getDate()}`;
			this.begin = agoDay
			
			this.getName() //外治法名称
			this.getXue('') //外治法穴位
		},
		methods: {
			// 取消
			backed(){
				uni.navigateBack()
			},
			// 提交信息
			submit() {
				if (this.list.length == 0) {
					uni.showToast({
						title: '请至少选择一个外治法',
						icon: 'none'
					})
					return;
				}
				let list = this.list
				let onceId = list.every(item => !!item.onceId);
				let price = list.every(item => !!item.price);
				let num1 = list.every(item => !!item.num1);
				if (!onceId || !price || !num1) {
					uni.showToast({
						title: '请完整填写信息',
						icon: 'none'
					})
					return
				}
				if(this.moneys == '单价和次数要大于0'){
					uni.showToast({
						title: '单价和次数要大于0',
						icon: 'none'
					})
					return
				}
				if(!this.time){
					uni.showToast({
						title: '请选择到期时间',
						icon: 'none'
					})
					return
				}
				let param = {
					data:JSON.stringify(this.list),
					end_time:this.time,
					remark:this.remarks
				}
				uni.showLoading({
					mask:true
				})
				tempwzf(param).then(res=>{
					uni.hideLoading()
					let pages = getCurrentPages(); // 当前页面
					let beforePage = pages[pages.length - 2]; // 前一个页面
					this.$nextTick(() => {
						beforePage.$vm.outsideId = res.data.oid//替换上个页面参数
						beforePage.$vm.outsideStr = res.data.str//替换上个页面参数
						uni.navigateBack()
					})
				})
			},
			// 外治法列表
			getName() {
				wzf({
					company_id: uni.getStorageSync('companyId')
				}).then(res => {
					this.array = res.data
				})
			},
			// 外治法选择
			bindPickerChange(e) {
				this.index = e.target.value
				let id = this.array[e.target.value].id;
				let title = this.array[e.target.value].title;
				let price = this.array[e.target.value].price;

				let result = this.list.some(function(item) {
					if (item.title == title) {
						return true;
					}
				})
				if (result == false) {
					this.arrayId = id;
					this.arrayName = title;
					let list = {
						title: title,
						id: id,
						onceId: '',
						onceName: '',
						secondArray: [],
						index: 0,
						secondName: '',
						secondNameList: [],
						price: price,
						num1: 3,
						num2: ''
					};
					this.list.push(list);
					this.calculation(); //计算价格
				}
			},
			// 选择部位
			bindPickerChange2(e, index) {
				this.index2 = e.target.value;
				let id = this.array2[e.target.value].id;
				let title = this.array2[e.target.value].title;
				if (this.list[index].onceName != title) {
					this.list[index].secondNameList = [];
					this.list[index].secondName = '';
				}

				this.list[index].onceId = id;
				this.list[index].onceName = title;
				this.getXue(id, index)
			},
			// 根据部位获取穴位
			getXue(id, index) {
				xuewei({
					pid: id
				}).then(res => {
					if (!id) {
						this.array2 = res.data;
					} else {
						this.list[index].secondArray = res.data;
					}
				})
			},
			// 选择穴位
			bindPickerChangeArray(e, index) {
				if(this.list[index].secondArray.length==0){
					return;
				}
				this.list[index].index = e.target.value;
				let title = this.list[index].secondArray[e.target.value].title;
				this.list[index].secondName = title;

				if (!this.list[index].secondNameList.includes(title)) {
					this.list[index].secondNameList.push(title)
				}
				// console.log(this.list)
			},
			// 删除索引下的穴位
			delSecondName(index, m) {
				this.list[index].secondNameList.splice(m, 1)
			},
			// 删除外治法
			delIndex(index) {
				this.list.splice(index, 1);
				this.calculation();
			},
			// 计算价格
			calculation() {
				let moneys;
				if (this.list.length == 0) {
					this.moneys = 0;
					return;
				}
				this.list.forEach(item => {
					if (!item.price || item.price == 0 || !item.num1 || item.num1 == 0) {
						moneys = '单价和次数要大于0'
						return
					} else {
						moneys = Number(item.price) * (Number(item.num1) + Number(item.num2))
					}
				})
				this.moneys = moneys
				console.log(moneys)
			},
			// 时间
			bindDateChange: function(e) {
				this.time = e.detail.value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #f8f8f8;
	}

	.dt {
		background: #ffffff;
		padding: 20upx 30upx;
		font-size: 30upx;
		margin-bottom: 30upx;

		.title {
			font-size: 32upx;
			font-weight: bold;
		}

		.navs {
			margin: 30upx 0;

			.name {
				width: 140upx;
				flex-shrink: 0;
				white-space: nowrap;
				color: #414141;
			}

			.info {
				flex: 1;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #414141;

				text {
					font-weight: 200;
				}

				.sex {
					padding: 0 24upx;
					margin: 0 24upx;
					border-left: 2upx solid #CCCCCC;
					border-right: 2upx solid #CCCCCC;
				}
			}

			.info2 {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				text-align: right;
				flex: 1;

				input,
				picker{
					flex: 1;
				}
				textarea{
					width: 460upx;
				}

				img {
					width: 45upx;
					height: 45upx;
					margin-left: 15upx;
				}

				.input2 {
					border: 1px solid #CCCCCC;
					text-align: left;
					padding: 0upx 10upx;
					border-radius: 10upx;
					width: 200upx;
				}

				.fast {
					width: 200upx;
					margin-left: 30upx;
					background: #F86C53;
					border-radius: 45upx;
					padding: 10upx 30upx;
					font-size: 28upx;
					color: #ffffff;
				}
			}
		}

		.delIndex {
			margin-bottom: 30upx;
			color: #fff;
			width: 200upx;
			background: #F86C53;
			border-radius: 45upx;
			padding: 10upx 30upx;
			font-size: 28upx;
			color: #ffffff;
			text-align: center;
		}
	}
	.btnStyle{
		margin: 40upx;
	}
	.btnStyle2{
		background-color: #999;
	}
</style>
